<template>
	<cover-view class="x-resting">
		<movable-area class="x-resting-movable">
			<movable-view direction="vertical" class="x-resting-movable-view" :y="50">
				<view class="x-resting-movable-button flex flex-center">
					<switch
						:checked="!props.info.resting"
						style="transform: scale(0.5);" color="var(--xl-success)"
						@change="submit"
					/>
					<text v-if="info.resting" class="h10 text-grey text-nowrap">休息中</text>
					<text v-else class="h10 text-success text-nowrap">接单中</text>
				</view>
			</movable-view>
		</movable-area>
	</cover-view>
</template>

<script setup lang="ts">
import { ref, onMounted, defineProps, onBeforeUnmount } from 'vue';
import { $api, $message } from "@/utils";
const props = withDefaults(defineProps<{
	info: any
}>(), {
	info: {}
});
const emit = defineEmits(['update'])
const submit = () => {
	uni.showLoading({ title: '提交中...' });
	$api.Technician.toggleResting().then((res: any) => {
		emit('update');
	}).catch((res: any) => {
		$message.error(res.msg);
	}).finally(() => {
		uni.hideLoading();
	})
}
onMounted(() => {
})
onBeforeUnmount(() => {
})
</script>

<style lang="scss" scoped>
.x-resting-movable {
	position: fixed;
	top: 100px;
	height: calc(100vh - 200px);
	width: 0px;
	right: 0;
	z-index: 99999;
	--height: 30px;
	--width: 100px;

	&-view {
		width: var(--width);
		height: var(--height);
		position: relative;
	}

	&-button {
		position: absolute;
		width: var(--width);
		height: var(--height);
		right: var(--width);
		background-color: #fff;
		border-top-left-radius: var(--height);
		border-bottom-left-radius: var(--height);
		box-shadow: var(--xl-shadow);
	}
}
</style>